import React, { DragEvent } from "react";
import style from "./index.module.scss";

export default function index() {
  var dragOffSetY: number = 0; // 鼠标点击下的位置相对于选择元素的y轴长度
  const dragStart = (event: DragEvent) => {
    // 设置拖放的数据类型和值
    console.log("event.offsetY", event);
    dragOffSetY = event.screenY;
    event.dataTransfer.setData("Text", (event.target as HTMLDivElement).id);
  };
  function dragOver(event: React.DragEvent<HTMLDivElement>) {
    event.preventDefault();
  }
  function dragEnter(event: React.DragEvent<HTMLDivElement>) {}
  function drop(event: React.DragEvent<HTMLDivElement>) {
    event.preventDefault();
    console.log(event, "===HTMLDivElement");

    var data = event.dataTransfer.getData("Text");
    // 追加
    (event.target as HTMLDivElement).appendChild(
      document.getElementById(data) as HTMLDivElement
    );
    // dom1.append(document.getElementById(data),data)
  }
  return (
    <div className={style.wrap}>
      <div className={style.wrap1} onDragOver={dragOver} onDrop={drop}>
        <img
          src={require("./images/feiji1.png")}
          draggable="true"
          onDragStart={dragStart}
          id="drag1"
        />
        <img
          src={require("./images/feiji3.png")}
          draggable="true"
          onDragStart={dragStart}
          id="drag3"
        />
      </div>
      <div
        id="wrap2"
        className={style.wrap2}
        onDragOver={dragOver}
        onDrop={drop}
      >
        <img
          src={require("./images/feiji2.png")}
          draggable="true"
          onDragStart={dragStart}
          id="drag2"
        />
      </div>
    </div>
  );
}
